<script type="text/javascript"
	src="{$base_dir}js/AJAX_InPatientSurgery.js"></script>
<script type="text/javascript">
    {literal}
    $(document).ready(function() {
                
        
        getUsersByEmployeeType();
    }); 
    {/literal}
</script>

<fieldset><legend>{translate}Input service{/translate}</legend>
<table width="100%" class="grid inline">
	<tr>
		<td class='label' colspan="4">{translate}Surgery team (Surgeon *, anesthetist *){/translate}&nbsp; &nbsp; <a
			href="javascript:displaySurgeryTeamTemplate();"
			title="{translate}Team template{/translate}"> <img
			src="../images/surgery_team.png"
			alt="{translate}Team template{/translate}" border="0" align="bottom" " />
		</a></td>
	</tr>
	<tr>
		<td class='label'>{translate}Role{/translate}</td>
		<td colspan="3"><select name="surgicalRole" id="surgicalRole"
			style="width: 205px;" onchange="javascript:getUsersByEmployeeType();">
			{html_options options=$participantRoles}
		</select></td>

	</tr>
	<tr>
		<td class='label'>{translate}Doctor's/Technician's name{/translate}</td>
		<td colspan="3"><select id="selectPeople" name="selectPeople"
			style="width: 205px;">
		</select>&nbsp;&nbsp; <a id="addPartToList" href="javascript:addParticipant()">
		<img class='imgBtn' src='../images/add_small.png' border='0'
			align='bottom' /> </a></td>
	</tr>
</table>
<table class="grid" id="surgeryParticipants" cellpadding="0" cellspacing="0">
	<thead>
		<tr>
			<th width="250px" align="center">{translate}Doctor's/Technician's name{/translate}</th>
			<th width="200px" align="center">{translate}Role{/translate}</th>
			<th width="30px" class='action last'>&nbsp;</th>
		</tr>
	</thead>
	<tbody>
		{foreach from=$participants key=role item=item} {foreach from=$item
		item=participant}
		<tr id="{$role}">
			<td valign="top" class='first'><span>{$participant.name}</span>
			<input type="text" name="personNames[]" id="personNames"
				value="{$participant.id}" style="width: 140px; display: none" /></td>
			<td valign="top"><span> {if $role == 'surgeon'}
			{translate}Surgeon{/translate} {elseif $role == 'anesthesiologist'}
			{translate}Anesthetist{/translate} {elseif $role == 'technicant'}
			{translate}Technician{/translate} {elseif $role == 'nurse'}
			{translate}Nurse{/translate} {elseif $role == 'introducer'}
			{translate}Introducer{/translate} {elseif $role ==
			'internal_pathologist'} {translate}Physician{/translate} {elseif
			$role == 'observer'} {translate}Observer{/translate} {/if} </span> <input
				type="text" name="roles[]" id="roles" value="{$role}"
				style="width: 140px; display: none" />
			<td valign="top" class='action last'><a id="p_row_{$index++}"
				href="javascript:removeRole('p_row_{$index-1}')"><img
				class='imgBtn' src='../images/remove_small.png' border='0'
				title='{translate}Delete{/translate}' /></a></td>
		</tr>
		{/foreach} {/foreach}
	</tbody>
</table>
<br>
<div id="reloadInputSurgery"><input id="inputSurgeryAdd"
	type="button" value="{translate}Add{/translate}"
	onclick="javascript:addSurgeryService('{$ticketId}')"></div>
<div id="innerLoadingInputSurgery" style="display: none; width: 100px;"
	align="left"><img src="{$base_uri}/images/ajax-loader.gif"></div>
<br>

<table cellspacing="0" cellpadding="0"  id="surgeryDetail" class="grid" width="100%">
	<tr>
		<th>{translate}Surgery date{/translate}</th>
		<th>{translate}Surgery{/translate}</th>
		<th>{translate}Price{/translate}</th>
		<th>{translate}Ins.Payment{/translate}</th>
		<th>{translate}P.Payment{/translate}</th>
		<th>{translate}Team{/translate}</th>
		<th></th>
	</tr>
	<tbody>
		{$tbody}
	</tbody>

</table>
</fieldset>
<div id="surgeryTeamTemplateDialog"></div>
<div id="surgeryParticipantsDialog"></div>
